<!-- alert.html -->
<div class="container mt-3">
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">添加预警</div>
                <div class="card-body">
                    <form id="alertForm">
                        <div class="form-group">
                            <label>选择股票</label>
                            <select class="form-control" id="stockSelect" required>
                                <option value="">-- 请选择股票 --</option>
                                <!-- 动态加载用户关注的股票 -->
                            </select>
                        </div>
                        <div class="form-group">
                            <label>预警类型</label>
                            <select class="form-control" id="alertType" required>
                                <option value="">-- 请选择预警类型 --</option>
                                <option value="price_up">价格上涨至</option>
                                <option value="price_down">价格下跌至</option>
                                <option value="percent_up">涨幅超过(%)</option>
                                <option value="percent_down">跌幅超过(%)</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>目标值</label>
                            <input type="number" class="form-control" id="targetValue" step="0.01" required>
                        </div>
                        <div class="form-group form-check">
                            <input type="checkbox" class="form-check-input" id="sendEmail">
                            <label class="form-check-label" for="sendEmail">邮件通知</label>
                        </div>
                        <button type="submit" class="btn btn-primary">添加预警</button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">我的预警</div>
                <div class="card-body">
                    <table class="table" id="alertTable">
                        <thead>
                        <tr>
                            <th>股票</th>
                            <th>预警类型</th>
                            <th>目标值</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function() {
        // 加载用户关注的股票
        $.get('/stock/list', {groupId: 1}, function(res) { // 假设自选分组ID为1
            let select = $('#stockSelect');
            res.data.forEach(stock => {
                select.append(`<option value="${stock.id}">${stock.name}(${stock.code})</option>`);
            });
        });

        // 加载用户预警
        loadAlerts();

        // 添加预警
        $('#alertForm').submit(function(e) {
            e.preventDefault();
            let alert = {
                stockId: $('#stockSelect').val(),
                userId: getCurrentUserId(), // 获取当前用户ID
                alertType: $('#alertType').val(),
                targetValue: $('#targetValue').val(),
                sendEmail: $('#sendEmail').is(':checked')
            };

            $.post('/alert/add', alert, function() {
                alert('预警添加成功');
                loadAlerts();
                $('#alertForm')[0].reset();
            });
        });

        function loadAlerts() {
            $.get('/alert/list', {userId: getCurrentUserId()}, function(res) {
                let tbody = $('#alertTable tbody').empty();
                res.data.forEach(alert => {
                    let typeText = '';
                    switch(alert.alertType) {
                        case 'price_up': typeText = '上涨至'; break;
                        case 'price_down': typeText = '下跌至'; break;
                        case 'percent_up': typeText = '涨幅超过'; break;
                        case 'percent_down': typeText = '跌幅超过'; break;
                    }

                    tbody.append(`
                    <tr>
                        <td>${alert.stockName}(${alert.stockCode})</td>
                        <td>${typeText}</td>
                        <td>${alert.targetValue}</td>
                        <td><button class="btn btn-sm btn-danger delete-alert" data-id="${alert.id}">删除</button></td>
                    </tr>
                `);
                });
            });
        }

        // 删除预警
        $(document).on('click', '.delete-alert', function() {
            let alertId = $(this).data('id');
            if (confirm('确定要删除这个预警吗？')) {
                $.ajax({
                    url: '/alert/delete/' + alertId,
                    type: 'DELETE',
                    success: function() {
                        loadAlerts();
                    }
                });
            }
        });
    });
</script>